<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item><b>首页</b></el-breadcrumb-item>
<!--    :to="{ path: '/home' }"-->
    <el-breadcrumb-item><b>饮食百科</b></el-breadcrumb-item>
  </el-breadcrumb>
 <div><br>
  <div><i class="el-icon-share" style="color: red;font-size: 20px"></i><span style="font-size: 20px"><b>常见食物分类</b></span></div><br>
   <div v-for="(item,index) in menus" :key="index"  class="clas" >
       <router-link :to="{path:'fooddetail',query:{type:item.type,typename:item.name}}" style="text-decoration: none">
       <div style="height: 100px;cursor:pointer;">
         <el-image :src='item.photo' style="width: 150px;height: 110px;border-radius: 5px;  box-shadow: 0px 0px 6px #888888;">
           <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline"></i>
           </div>
         </el-image>
         <div class="type1"><h>{{item.name}}</h></div>
         <div class="type2"><h>{{item.rque}}</h></div>
         <div class="type3"><h>更多的...</h></div>
       </div>
       <el-divider></el-divider>
       <br>
       </router-link>
   </div>
 </div>
  </div>
</template>

<script>

export default {
  name: "classify",
  data(){
    return {
      menus: [
        { url:"fooddetail",
          photo:require('@/assets/food1.png'),
          name:"谷薯芋、杂豆、主食",
          rque:"米饭，玉米，馒头，燕麦片，面包，红薯，小米粥，面条",
          type:1
        }, { url:"#",
          photo:require('@/assets/food2.png'),
          name:"蛋类、肉类及制品",
          rque:"鸡蛋，鸭蛋，鹌鹑蛋，牛肉，羊肉，鸡肉，火腿肠，鱼丸",
          type:2
        },{ url:"#",
          photo:require('@/assets/food3.png'),
          name:"奶类及制品",
          rque:"牛奶，奶酪，酸奶，黄油，奶片，全脂奶粉，蒙古奶酪",
          type:3
        },{ url:"#",
          photo:require('@/assets/food4.png'),
          name:"蔬果和菌藻",
          rque:"玉米，白菜，青菜，火龙果，蘑菇，香菇，平菇，金针菇，海带",
          type:4
        },{ url:"#",
          photo:require('@/assets/food5.png'),
          name:"坚果、大豆及制品",
          rque:"豆腐，豆浆，豆腐干，腐竹，豆腐脑，松子，开心果，核桃，杏仁",
          type:5
        },{ url:"#",
          photo:require('@/assets/food6.png'),
          name:"饮料",
          rque:"百事可乐，可口可乐，雪碧，美年达，果粒橙，王老吉",
          type:6
        },{ url:"#",
          photo:require('@/assets/food7.png'),
          name:"食用油、油脂及制品",
          rque:"人造奶油、代可可脂、人造黄油、氢化油、植脂奶油",
          type:7
        },{ url:"#",
          photo:require('@/assets/food8.png'),
          name:"调味品",
          rque:"盐，海天酱油，醋，老干妈，味精，胡椒",
          type:8
        },{ url:"#",
          photo:require('@/assets/food9.png'),
          name:"零食、点心、冷饮",
          rque:"薯片，薯条，茶，小米饼，旺旺仙贝，陈皮糖",
          type:9
        },{ url:"#",
          photo:require('@/assets/food10.png'),
          name:"其他",
          rque:"枸杞，松花粉，菊花(干)，龟苓膏，油面筋，陈皮",
          type:10
        }
      ],
    }
  },
}
</script>

<style scoped>
.el-breadcrumb{
  line-height: 2;
}

.clas{
  width: 380px;
  margin-top: 5px;
  margin-right: 10px;
  float: left;
}
.type1{
  position: relative;
  top:-120px;
  left: 160px;
  color: rgb(63,115,222);
  font-weight: bolder;
  font-size: 15px;
}
.type2{
  position: relative;
  top:-115px;
  left: 160px;
  width: 235px;
  color: #888888;
  font-size: 15px;
}
.type3{
  position: relative;
  top:-80px;
  left: 160px;
  color: rgb(63,115,222);
  font-size: 10px;
}

</style>
